<template>
  <div class="app-container equipment">
      <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="100px">
            <el-form-item label="所属公司">

                <treeselect v-if="company" style="width: 199px;height: 32px" v-model="selectForm.deptId" :options="company" placeholder="请选择所属公司"/>
            </el-form-item>
            <el-form-item label="设备分类">
                <treeSelect :model="selectForm.deviceTypeId" type="deviceType"></treeSelect>
            </el-form-item>
            <el-form-item label="生产厂家">
                <el-select v-model="selectForm.supplierId" placeholder="请选择" clearable>
                    <el-option v-for="item in supplierList" :key="item.id" :label="item.supplierName" :value="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="selectForm.deviceStatusId" placeholder="设备状态" size="small" clearable>
                    <el-option v-for="item in deviceStatusList" :key="item.id" :label="item.statusName" :value="item.id"/>
                </el-select>

            </el-form-item>
            <el-form-item label="存放位置">
                <treeSelect :model="selectForm.repositoryId" type="deviceRepo"></treeSelect>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="selectForm.pageNum=1;getList();">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list" border @selection-change="handleSelectionChange" stripe>
            <el-table-column align="center" type="index" label="序号"  width="55"/>
            <el-table-column align="center" label="设备编号"  property="deviceCode"/>
            <el-table-column align="center" label="设备名称"  property="deviceName"/>
            <!-- <el-table-column align="center" label="类型"  property="deviceTypeName"/> -->
            <el-table-column align="center" label="设备类别"  property="deviceTypeName"/>
            <el-table-column align="center" label="规格型号"  property="deviceModel"/>
            <el-table-column align="center" label="生产厂家"  property="supplierName"/>
            <el-table-column align="center" label="购置日期" width="200px"  property="buyDate"/>
            <el-table-column align="center" label="购置金额"  property="buyMoney"/>
            <el-table-column align="center" label="状态"  property="deviceStatusName"/>
            <el-table-column align="center" label="存放位置"  property="repositoryName"/>
            <el-table-column align="center" label="负责人"  property="chargeUserName"/>
        </el-table>
        <pagination :total="total" :page.sync="selectForm.pageNum" :limit.sync="selectForm.pageSize" @pagination="getList" :page-sizes="[5,10,20,30]"/>
        <div class="equipment-con">
            <div class="left">
                <div>
                    <h2>设备数量</h2>
                    <span>统计维度</span>

                    <el-select v-model="typeNum" @change="changeNumType" placeholder="请选择">
                        <el-option
                            v-for="item in typeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                        </el-option>
                    </el-select>
                    <span>图表类型</span>
                    <el-select v-model="echartsNum" @change="changeNumFormType" placeholder="请选择">
                        <el-option
                        v-for="item in echartsTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <pie-chart v-if="isshow&&echartsNum==1" :numberData="numberData"></pie-chart>
                    <line-chart v-if="isshow&&echartsNum==2" :numberData="numberData"></line-chart>
                    <line-chart v-if="isshow&&echartsNum==3" :numberData="numberData" :smooth="true"></line-chart>
                    <bar-chart v-if="isshow&&echartsNum==4" :numberData="numberData"></bar-chart>
                    <bar-chart v-if="isshow&&echartsNum==5" :numberData="numberData" :type="true"></bar-chart>
                </div>
            </div>
            <div class="left">
                <div>
                    <h2>购置金额</h2>
                    <span>统计维度</span>

                <el-select v-model="typeMoney" @change="changeMonType" placeholder="请选择">
                    <el-option
                        v-for="item in typeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                    </el-option>
                </el-select>
                <span>图表类型</span>
                <el-select v-model="echartsMoney" @change="changeMonFormType" placeholder="请选择">
                    <el-option
                    v-for="item in echartsTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
                </div>
                <div>
                    <pie-chart v-if="isshows&&echartsMoney==1" :numberData="moneyData"></pie-chart>
                    <line-chart v-if="isshows&&echartsMoney==2" :numberData="moneyData"></line-chart>
                    <line-chart v-if="isshows&&echartsMoney==3" :numberData="moneyData" :smooth="true"></line-chart>
                    <bar-chart v-if="isshows&&echartsMoney==4" :numberData="moneyData"></bar-chart>
                    <bar-chart v-if="isshows&&echartsMoney==5" :numberData="moneyData" :type="true"></bar-chart>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import treeSelect from './treeSelect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deviceStatus } from '@/api/basicInformation/index'
import {supplier} from '@/api/basicInformation/index'
import pieChart from './pieChart'
import lineChart from './lineChart'
import barChart from './barChart'
import {equipmentList,equipmentPie} from '@/api/statistics/index'
export default {
    components: {
        Treeselect,
        treeSelect,
        pieChart,
        lineChart,
        barChart
    },
    data(){
        return{
            isshow:false,
            isshows:false,
            selectForm:{
                pageNum:1,
                pageSize:5
            },
            company:null,
            deviceStatusList:[],
            supplierList:[],
            loading:false,
            list:[],
            total:0,
            selectList:[],
            typeList:[
                {value:1,label:'类型条件'},
                {value:2,label:'设备类型'},
                {value:3,label:'生产厂家'},
                {value:4,label:'购置年份'},
                {value:5,label:'状态'},
                {value:6,label:'负责人'}],
            echartsTypeList:[
                {value:1,label:'饼图'},
                {value:2,label:'折线图'},
                {value:3,label:'曲线图'},
                {value:4,label:'纵向柱状图'},
                {value:5,label:'横向柱状图'}],
            typeNum:2,
            echartsNum:1,
            typeMoney:2,
            echartsMoney:1,
            numberData:[],
            moneyData:[]
        }
    },
    created(){
        this.getTree()
        this.getDeviceStatus()
        this.getSupplier()
        this.getList()
        this.getPie(1,this.typeNum)
        this.getPie(2,this.typeMoney)
    },
    methods:{
        getTree() {
            treeselect().then(response => {
            this.company = response.data;
            });
        },
        /** 查询设备状态*/
        async getDeviceStatus() {
            let res = await deviceStatus()
            this.deviceStatusList = res.rows
        },
        /** 查询生产厂家*/
        async getSupplier(){
            let res=await supplier()
            this.supplierList=res.rows
        },
        handleSelectionChange(info){
            this.selectList=info
        },
        getPie(type,val){
            if(type==1){
                this.isshow=false
            }else{
                this.isshows=false
            }

            equipmentPie({statisticalType:val,parameter:type}).then((res)=>{
                if(res.code==200){
                    if(type==1){
                        this.isshow=true
                        this.numberData=res.data
                    }else{
                        this.isshows=true
                        this.moneyData=res.data
                    }
                }
            })
        },
        getList(){
            this.loading=true
            equipmentList(this.selectForm).then((res)=>{
                if(res.code==200){
                    this.list=res.rows
                    this.total=res.total
                    this.loading=false
                }
            })
        },
        changeNumType(val){
            this.getPie(1,val)
        },
        changeNumFormType(val){
            this.isshow=false
            setTimeout(()=>{
                this.isshow=true
            },500)
        },
        changeMonType(val){
            this.getPie(2,val)
        },
        changeMonFormType(){
            this.isshows=false
            setTimeout(()=>{
                this.isshows=true
            },500)
        },
        add(){
            this.$router.push({path:'/personnelMent/impEdit'})
        },
        edit(row){
            this.$router.push({path:'/personnelMent/impEdit',query:{id:row.id}})
        },
        dels(){
            //批量删除
            if(this.selectList.length<=0){
                this.$message.warning('请选择行')
                return false
            }
            this.$confirm('确定批量删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                let arr=[]
                this.selectList.forEach((i)=>{
                    arr.push(i.id)
                })
                this.shanchu(arr)
            }).catch(() => {
                this.$message.info('取消删除')
            })
        },
        del(row){
            //删除
            this.$confirm('确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                this.shanchu(row.id)
            }).catch(() => {
                this.$message.info('取消删除')
            })
        },
        shanchu(id){
            implementDels(id).then((res)=>{
                if(res.code==200){
                    this.$message.success(res.msg)
                    this.getList()
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.equipment{
    .equipment-con{
        max-width: 1200px;
        margin: auto;
        .left{
            float: left;
            width: 600px;
            height: 400px;
            span{
                display: inline-block;
                padding:0 10px;
            }
        }
    }
}
</style>
